popupMenu/switch: Use icons for state indicators

The indicators are currently part of the background image in the
high contrast theme. Using symbolic icons instead allows separating
the switch shapes from the high-contrast setting in the future.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3107>

diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml
index f2d858db16f5ef3a85ec8b0acb34e65224a7bbd2..46d4b3577f4ccbb2eec8d90b0bfc9fb47db49f5d 100644 (file)
--- a/data/gnome-shell-icons.gresource.xml
+++ b/data/gnome-shell-icons.gresource.xml
@@ -45,5 +45,7 @@
     <file preprocess="xml-stripblanks">scalable/status/no-notifications-symbolic.svg</file>
     <file preprocess="xml-stripblanks">scalable/status/screen-privacy-disabled-symbolic.svg</file>
     <file preprocess="xml-stripblanks">scalable/status/screen-privacy-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">scalable/status/switch-on-symbolic.svg</file>
+    <file preprocess="xml-stripblanks">scalable/status/switch-off-symbolic.svg</file>
   </gresource>
 </gresources>

diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 0ce8cca93feca77fa53a08c3bf8631e4c58e464c..4501c3195fcbdd652097dc7dbb15cd2a36312d96 100644 (file)
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -17,10 +17,8 @@
     <file>process-working-light.svg</file>
     <file>process-working-dark.svg</file>
     <file>toggle-off.svg</file>
-    <file>toggle-off-hc.svg</file>
     <file>toggle-off-light.svg</file>
     <file>toggle-on.svg</file>
-    <file>toggle-on-hc.svg</file>
     <file>toggle-on-light.svg</file>
     <file>workspace-placeholder.svg</file>
   </gresource>

diff --git a/data/icons/scalable/status/switch-off-symbolic.svg b/data/icons/scalable/status/switch-off-symbolic.svg
new file mode 100644 (file)
index 0000000..28e36aa
--- /dev/null
+++ b/data/icons/scalable/status/switch-off-symbolic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000;solid-opacity:1;vector-effect:none;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000;stop-opacity:1;opacity:1" d="M7.979 295.738c-2.76 0-5.016 2.259-5.016 5.018s2.257 5.017 5.016 5.017c2.758 0 5.017-2.258 5.017-5.017 0-2.76-2.259-5.018-5.017-5.018zm0 2a3.003 3.003 0 0 1 3.017 3.018 3.003 3.003 0 0 1-3.017 3.017 3.001 3.001 0 0 1-3.016-3.017 3.001 3.001 0 0 1 3.016-3.018z" transform="translate(0 -292.767)"/></svg>
\ No newline at end of file

diff --git a/data/icons/scalable/status/switch-on-symbolic.svg b/data/icons/scalable/status/switch-on-symbolic.svg
new file mode 100644 (file)
index 0000000..0f0e18f
--- /dev/null
+++ b/data/icons/scalable/status/switch-on-symbolic.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="on-symbolic.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="10.416792"
+     inkscape:cy="9.9204611"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid815" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-292.76666)">
+    <rect
+       style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.58198857;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"
+       id="rect817"
+       width="2"
+       height="9.9999971"
+       x="7"
+       y="295.76666" />
+  </g>
+</svg>

diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss
index d8a68a7df90de77d564fd948b0ce7678c3e6d63c..0364d4c0c5bff8e7421ba452b6962e8c294cba4a 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -14,9 +14,5 @@ $switch_width: 48px;
     background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
   }
 
-  @if $contrast == 'high' {
-    background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
-    &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
-  }
-
+  & StIcon {icon-size: $base_icon_size;}
 }

diff --git a/data/theme/toggle-off-hc.svg b/data/theme/toggle-off-hc.svg
deleted file mode 100644 (file)
index 2652800..0000000
--- a/data/theme/toggle-off-hc.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.4" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>
\ No newline at end of file

diff --git a/data/theme/toggle-on-hc.svg b/data/theme/toggle-on-hc.svg
deleted file mode 100644 (file)
index 2d553c6..0000000
--- a/data/theme/toggle-on-hc.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)" stroke="none"><rect style="fill:#3584e4;stroke:none;stroke-width:1;marker:none" width="48" height="26" y="291.18" ry="13" fill="#3081e3" rx="13"/><rect ry="11" rx="11" y="293.18" x="24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7"/></g><path style="fill:#f8f7f7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linejoin:round;stroke-dashoffset:2" d="M14 7v12h-2V7Z"/></svg>
\ No newline at end of file

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 1204978e7e8c696df828d67defc7aa8b6863e698..9886649ab754dc6d8d49531e50ba43f29e35354d 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -340,11 +340,50 @@ export const Switch = GObject.registerClass({
     _init(state) {
         this._state = false;
 
+        const box = new St.BoxLayout({
+            x_expand: true,
+            y_expand: true,
+        });
+
         super._init({
             style_class: 'toggle-switch',
+            child: box,
             accessible_role: Atk.Role.CHECK_BOX,
             state,
         });
+
+        this._onIcon = new St.Icon({
+            icon_name: 'switch-on-symbolic',
+            x_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        box.add_child(this._onIcon);
+
+        this._offIcon = new St.Icon({
+            icon_name: 'switch-off-symbolic',
+            x_expand: true,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        box.add_child(this._offIcon);
+
+        St.Settings.get().connectObject('notify::high-contrast',
+            () => this._updateIconOpacity(),
+            this);
+        this.connect('notify::state',
+            () => this._updateIconOpacity());
+        this._updateIconOpacity();
+    }
+
+    _updateIconOpacity() {
+        const activeOpacity = St.Settings.get().high_contrast
+            ? 255. : 0.;
+
+        this._onIcon.opacity = this.state
+            ? activeOpacity : 0.;
+        this._offIcon.opacity = this.state
+            ? 0. : activeOpacity;
     }
 
     get state() {